<template>
  <div class="home-container">
    <div class="home-text">name: {{ name }}</div>
    <div>价格{{price | toThousandFilter}}</div>
    <div>首字母大写{{string | uppercaseFirst}}</div>
    <!-- 富文本 -->
    <editor ref="editor" @change="changeWang" :value='vhtml'></editor>
    <!-- 导入excel -->
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
    <!-- 上传图片 -->
    <Upload />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import editor from '@/components/Editor'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import Upload from '@/components/Upload/SingleImage2'
export default {
  name: 'Home',
  components:{
    editor,
    UploadExcelComponent,
    Upload
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      price: 5555.666,
      string:'string',
      vhtml:"",
       tableData: [],
      tableHeader: []
    }
  },
  mounted () {
	 
	},
  methods:{
    changeWang(html) {
      console.log(html)
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
